<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.3/echarts.min.js"></script>
    <script type="text/javascript" src="https://static.pocketlive.tv/static/plugins/jquery.min.js"></script>
</head>
<body>
	<form action="" method="get">
	主播昵称: <input type="text" name="nick" value="<?php echo $nick = isset($_GET['nick'])?$_GET['nick']:'';?>"> <input type="submit">
	</form>
	<?php 
	use classlib\core as C;
    use classlib\orm;
	$userid = isset($_GET['userid'])?(int)$_GET['userid']:0;
	if (!empty($nick)) {
		$nick = htmlspecialchars($nick);
		$where[]= array('nickname', '%'.$nick.'%', \classlib\orm::OP_LIKE);
	} else {
		$where[]= array('userid', $userid, \classlib\orm::OP_EQ);
	}
	$list   = C\model::load('pro.pl.userinfo')->set_dev(1)->get_list(0, -1, $where);
	if (empty($list)) {
		//ob_end_clean();
		exit;
	}
	echo '根据关键字查询出主播:';
	foreach ($list as $item){
		echo '<a href="/admin/live/log/graph/framehtml.html?userid='.$item['userid'].'">'.$item['nickname'].'</a>'."&nbsp;&nbsp;&nbsp;";
	}
	if (!empty($nick)) {
		$user = C\model::load('pro.pl.userinfo')->set_dev(1)->get_item(array('nickname'=>$nick));
	} else {
		$user = C\model::load('pro.pl.userinfo')->set_dev(1)->get_one($userid);
	}
	//$user   = $list[0];
	$studio = C\model::load('pro.pl.studio')->get_item(array('userid'=>$user['userid']));
	if (empty($studio)) {
		//ob_end_clean();
		exit;
	}
	//ob_end_clean();
	$sql    = 'SELECT DISTINCT(eventid) FROM log_eventlog where studioid='.$studio['id'] . ' order by id desc';
	$event  = C\model::load('pro.log.eventlog')->get_orm()->get_list($sql);
	?>

	<p>
	该主播(<?php echo $user['nickname'];?>)所有播放场次：
	<?php 
	foreach ($event as $item){
		echo '<a href="?userid='.$user['userid'].'&eventid='.$item['eventid'].'">'.$item['eventid'].'&nbsp;&nbsp;'.'</a>';
	}
	?>
	</p>
	<?php 
	$eventid= isset($_GET['eventid'])?$_GET['eventid']:'';
	if (!$eventid) {
		exit;
	}
	$event  = C\model::load('pro.log.eventlog')->set_dev($user['userid'])->get_one($eventid);
	$sql    = 'select AVG(averfps) as fps, AVG(averflow) as flow, AVG(avercamfps) as camfps,net from log_eventlog where studioid='.$studio['id'] . ' and eventid='.$eventid;
	$aver   = C\model::load('pro.log.eventlog')->get_orm()->get_row($sql);
	$sql    = 'select AVG(averfps) as fps, AVG(averflow) as flow, AVG(avercamfps) as camfps from log_eventlog where studioid='.$studio['id'];
	$total  = C\model::load('pro.log.eventlog')->get_orm()->get_row($sql);
	?>
	<p>
	该主播(<?php echo $user['nickname'];?>)所有播放场次帧率平均值:<?php echo round($total['fps'])?> &nbsp;流量平均值：<?php echo round($total['flow'])?>&nbsp;摄像头帧率平均值：<?php echo round($total['camfps'])?>
	</p>
	<p>
	该场(<?php echo $eventid;?> 开播时间:<?php echo date('Y-m-d H:i:s', $event['aritime']);?> 最近一次的心跳时间:<?php echo date('Y-m-d H:i:s', $event['lasttime']);?>
	关闭时间:<?php echo date('Y-m-d H:i:s', $event['offtime']);?>)
	目前帧率平均值：<?php echo round($aver['fps'])?> &nbsp;流量平均值：<?php echo round($aver['flow'])?> &nbsp;摄像头帧率平均值：<?php echo round($aver['camfps'])?> 
	</p>
	<p>
	该场次(<?php echo $eventid;?>)来源:<?php echo $event['agent'];?>
	<?php if ($aver['net']) {?>
	(网络：<?php echo $aver['net'];?>)
	<?php }?>
	</p>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1600px;height:600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        chart();
     	setInterval(function () {
     		chart();
		}, 60000);
		function chart() {
			myChart.showLoading();
			$.get("<?php echo $url;?>?studioid=<?php echo $studio['id'];?>&eventid=<?php echo $eventid;?>").done(function (data) {
	        	myChart.hideLoading();
		 		if (data) {
		 			data = $.parseJSON(data);
		            myChart.setOption({
		            	title: {
		            	text: '最近30分钟实时曲线',
		            },
		            tooltip: {
		                trigger: 'axis'
		            },
		            legend: {
		                data:['帧率','流量','摄像头帧率']
		            },
		            xAxis:  {
		                type: 'category',
		                boundaryGap: false,
		                data: data.time
		            },
		            yAxis: {
		                type: 'value',
		            },
		            series: [
		                {
		                    name:'帧率',
		                    type:'line',
		                    data: data.fps,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:60},
		                            {type: 'min', name: '最小值', symbolSize:60}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '平均值'}
		                        ]
		                    }
		                },
		                {
		                    name:'流量',
		                    type:'line',
		                    data: data.flow,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:80},
		                            {type: 'min', name: '最小值', symbolSize:80}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '平均值'},
		                        ]
		                    }
		                },
		                {
		                    name:'摄像头帧率',
		                    type:'line',
		                    data: data.camfps,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:80},
		                            {type: 'min', name: '最小值', symbolSize:80}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '平均值'},
		                        ]
		                    }
		                }
		            ]
			        });
		 		}
		    });
		}
    </script>
</body>
</html>